<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ book.book_name }}</title>

    <style>
        .div-a {
            float: left;
            width: 100%;
            height: 40px;
            border: 1px solid #ffffff
        }

        .textbox {
            background: #bfcedc;
            border-top: #7f9db9 1px solid;
            border-left: #7f9db9 1px solid;
            border-right: #7f9db9 1px solid;
            border-bottom: #7f9db9 1px solid;
            font-family: "宋体", "verdana", "arial", "helvetica";
            font-size: 25px;
            resize: none
        }
    </style>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Bootstrap styles -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <!-- Font-Awesome -->
    <link rel="stylesheet" href="/static/css/font-awesome/css/font-awesome.min.css">

    <!-- Google Webfonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600|PT+Serif:400,400italic' rel='stylesheet'
          type='text/css'>

    <!-- Styles -->
    <link rel="stylesheet" href="/static/css/style.css" id="theme-styles">

</head>
<body>
{#<div class="div-a">#}
{#    <img src="/static/img/1.jpg"><br/>#}
{#    <form action="#" method="post" accept-charset="utf-8">#}
{#        <textarea rows="5" cols="30" id="comment" name="comment" class="textbox"></textarea><br/>#}
{#        <button type="submit">评论</button>#}
{#    </form>#}
{#</div>#}

<div class="widewrapper main">
    <div class="container">
        <div class="row">
{#              <div class="col-md-8 blog-main">#}
                <book class="blog-post">
                    <header>
                        <div class="lead-image">
                            <img src="/static/img/book_1.jpg" alt="" class="img-responsive">
                            <img src="/static/img/1.jpg" alt="" class="img-responsive">
                        </div>
                    </header>
                    <div class="body">
{#                        <h1>{{ article.article_title }}</h1>#}
{#                        <div class="meta">#}
{#                            <i class="fa fa-user"></i> {{ article.article_author }} <i class="fa fa-calendar"></i>{{ article.article_time }}<i#}
{#                                class="fa fa-comments"></i><span class="data"><a href="#comments">{{ comments|length }} Comments</a></span>#}
{#                        </div>#}
                        <p>书名：{{ book.book_name }}</p>
                        <p>作者：{{ book.author }}</p>
                        <p>出版日期：{{ book.publish_date }}</p>
                        <p>出版社：{{ book.publisher }}</p>
                        <p>装帧: 平装</p>
                    </div>
                </book>
                <aside class="create-comment" id="create-comment">
                    <hr>
                    <form action="#" method="post" accept-charset="utf-8">
                        <textarea rows="10" name="comment" id="comment" placeholder="您的评论..."
                                  class="form-control input-lg"></textarea>
                        <div class="buttons clearfix">
                            <button type="submit" class="btn btn-xlarge btn-clean-one">评论</button>
                        </div>
                    </form>
                </aside>
                <aside class="comments" id="comments">
                    <hr>
                    <h2><i class="fa fa-comments"></i> {{ comments|length }} Comments</h2>

                    {% for comment in comments %}
                        <article class="comment">
                            <header class="clearfix">
                                <div class="meta">
                                    <h3><a href="#">{{ comment.comment_user }}</a></h3>
                                    <span class="date">{{ comment.comment_time }}</span>
                                </div>
                            </header>
                            <div class="body">{{ comment.comment_content }}</div>
                        </article>
                    {% endfor %}
                </aside>
{#            </div>#}
        </div>
    </div>
</div>
</body>
</html>